/* banner css */
.banner { position: relative; height: 100vh; display: flex; justify-content: flex-start; align-items: center; z-index: 1; }
.banner::before { content: ''; position: absolute; bottom: -140px; left: 0; width: 100%; height: 300px; z-index: 1; background: linear-gradient(0deg, rgba(5, 4, 30, 0) 0%, rgba(5, 4, 30, 0.8) 19.77%, #05041E 38.79%, #05041E 55.52%, rgba(5, 4, 30, 0.8) 76.44%, rgba(5, 4, 30, 0) 100%); }
.bannerVideo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.bannerVideo video { width: 100%; height: 100%; object-fit: cover; }
.bannerContent { width: 40%; }
.bannerContent h1 { margin: 0 0 50px 0; }

/* textDescOnly css */
.textDescOnly { padding: 200px 0 64px 0; }
.textDescInner .titleHeading.upperCase { color: var(--primaryColor); padding: 44px 0 0 0; margin: 52px 0 0 0; position: relative; }
.textDescInner .titleHeading.upperCase:before { content: ''; position: absolute; width: 90%; height: 6px; background: linear-gradient(90deg, #B2058C 17%, #C51768 22%, #D72848 28%, #E5362D 34.01%, #F14019 41.01%, #F8480A 48.01%, #FD4C02 57.01%, #FF4E00 72.01%, #F8C031 100.02%); top: 0; left: 50%; transform: translateX(-50%); border-radius: 50%; filter: blur(5px); opacity: 0.5; }
.textDescInner { width: 80%; margin: 0 auto; }
.scrollTo { width: 32px; height: 44px; border: 2px solid var(--primaryColor); border-radius: 30px; display: block; margin: 0 auto; margin-top: 40px; }
.scrollTo img { animation: scrollTo 3s ease-in-out infinite; }
@keyframes scrollTo {
	0%, 100% { transform: translateY(10px); }
	50% { transform: translateY(20px); }
}

/* insightListing css */
.insightListing { background: linear-gradient(0deg, rgba(5, 4, 30, 0) 0%, #05041E 21.03%, #05041E 66.32%, rgba(5, 4, 30, 0) 100%); padding: 300px 0; }
.middelImageWrapper { width: 400px; height: 400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 2px solid; background: linear-gradient(90deg, #B2058C 0%, #FF4E00 49.5%, #F8C031 100%); border-radius: 50%; position: relative; }
.middelImage { width: calc(100% - 4px); height: calc(100% - 4px); background-color: var(--bgColor); border-radius: 50%;    /* padding: 44px; */ }
.middelImage img { width: 85%; height: 100%; object-fit: contain; margin: 0 auto; display: flex; }
.dotWrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.dotWrapper span { position: absolute; width: 20px; height: 20px; background: linear-gradient(90deg, #B2058C 0%, #FF4E00 49.5%, #F8C031 100%); border-radius: 50%; transform: translate(-50%, -50%); }
.insightListingInner { position: relative; }
.contentWrapper { position: absolute; width: 400px; height: 400px; top: 0; left: 50%; transform: translateX(-50%); transition: all 0.3s; display: flex; align-items: center; justify-content: space-between; }
.contentWrapper .smallDescription { font-size: 14px; }
.insightList { display: inline-block; position: absolute; width: 450px; text-align: center; transform-origin: center left; bottom: 100%; left: 0; }
.insightListInner { opacity: 0.1; transition: all 0.3s; transition-delay: 0.2s; }
.active .insightListInner { opacity: 1; }
.insightListInner .titleHeading { text-transform: uppercase; font-weight: 600; font-size: var(--mediumFont); margin-bottom: 8px; }
.timeLineWrapper { display: none; }

/* introSetleoLab css */
.introSetleoLabvideoWrap { border: 1px solid #fff; padding: 20px; border-radius: 400px; position: relative; margin: 84px 0 0 0; animation: scaleBig 20s linear; animation-timeline: view(); }
.introSetleoLabTop { width: 74%; margin: 0 auto; }
@keyframes scaleBig {
	0% { transform: scale(0.7) translateY(50px); }
	35% { transform: scale(0.8) translateY(25px); }
	50% { transform: scale(1) translateY(0); }
}
.in-viewport .introSetleoLabvideoWrap { transform: translateY(0) scale(1); }
.introSetleoLabvideoWrap:before { content: ''; position: absolute; width: 16px; height: 16px; background-color: var(--primaryColor); border-radius: 50%; right: 11%; top: 19px; }
.introSetleoLabvideoWrap:after { content: ''; position: absolute; width: 55vw; height: 300px; border-radius: 100%; background: linear-gradient(90deg, #B2058C 17%, #C51768 22%, #D72848 28%, #E5362D 34.01%, #F14019 41.01%, #F8480A 48.01%, #FD4C02 57.01%, #FF4E00 72.01%, #F8C031 100.02%); bottom: -20%; left: 50%; transform: translateX(-50%); filter: blur(200px); opacity: 0.5; z-index: -1; }
.introSetleoLabVideo { height: 500px; border-radius: 400px; overflow: clip; width: 100%; position: relative; }
.introSetleoLabVideo video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.playBtn { position: absolute; top: 50%; left: 50%; border: 2px solid var(--whiteColor); width: 50px; height: 50px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; padding: 0 0 0 16px; border-radius: 30px; z-index: 2; cursor: pointer; }
.playBtn span { border-left: 15px solid var(--whiteColor); border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 15px solid transparent; display: inline-block; }
.introSetleoLabVideo:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-color: #0000007d; border-radius: 500px; }

/* halfContent css */
.halfContent { margin: 300px 0; padding: 50px 0; position: relative; overflow-x: clip; }
.halfContentInner { position: relative; }
.satelliteImage { position: absolute; top: -250px; right: 100px; animation: floating 5s ease-in-out infinite; filter: grayscale(1); }
@keyframes floating {
	0% { transform: translateY(0) rotate(180deg); }
	50% { transform: translateY(-40px) rotate(180deg); }
	100% { transform: translateY(0) rotate(180deg); }
}
.halfContentInner .row { align-items: center; }
.halfContentLeft .subHeading { position: relative; padding: 0 0 42px 0; }
.halfContentLeft .subHeading:before { content: ''; position: absolute; width: 0; height: 2px; background-color: var(--whiteColor); bottom: 0; left: 0; transition: all 0.3s; transition-delay: 0.2; }
.halfContentLeft .subHeading:after { content: ''; position: absolute; width: 16px; height: 16px; background-color: var(--whiteColor); bottom: -6px; left: 0; transition: all 0.3s; border-radius: 50%; transition-delay: 0.2; }
.halfContentRight .description { line-height: 35px; }
.halfContent.in-viewport .subHeading::before { width: 50%; }
.halfContent.in-viewport .subHeading:after { left: 50%; }

/* hoverToChange css */
.hovertoChange { background: linear-gradient(360deg, rgba(5, 4, 30, 0) 0%, #05041E 26.88%, #05041E 67.83%, rgba(5, 4, 30, 0) 100%); position: relative; z-index: 1; overflow-x: clip; }
.hovertoChange:before { content: ''; position: absolute; top: 50%; right: -250px; transform: translateY(-50%); width: 350px; height: 350px; background: linear-gradient(90deg, #B2058C 17%, #C51768 22%, #D72848 28%, #E5362D 34.01%, #F14019 41.01%, #F8480A 48.01%, #FD4C02 57.01%, #FF4E00 72.01%, #F8C031 100.02%); z-index: -1; filter: blur(200px); }
.imageListing { position: relative; padding: 15px; border-radius: 140px; border: 1px solid #ffffff4d; height: 750px; }
.imageListing:before { content: ''; position: absolute; width: 16px; height: 16px; background-color: var(--primaryColor); border-radius: 50%; left: 18%; top: -8px; }
.imageList { position: absolute; top: 15px; width: 100%; opacity: 0; visibility: hidden;    /* transform: scale(0.9); */ transition: all 0.3s; }
.imageList.activeImage {			    /* transform: scale(1); */
opacity: 1; visibility: visible; }
.imageList { height: calc(100% - 30px); width: calc(100% - 30px); border-radius: 130px; overflow: hidden; }
.imageDiv { width: 100%; height: 100%; }
.imageDiv img { width: 100%; height: 100%; }
.hovertoChangeDetail h4 { display: block; width: 100%; font-size: var(--mediumFont); text-transform: uppercase; margin: 0; }
.hovertoChangeDetail ul { margin: 0 0 0 32px; padding: 0; list-style: none; }
.hovertoChangeDetail ul li a { text-decoration: none; font-size: var(--normalFont); padding: 24px 40px; border-top: 1px solid #FFFFFF; display: block; opacity: 0.25; }
.hovertoChangeDetail ul li a span { font-size: var(--normalFont); margin: 8px 0 0 0; display: inline-block; }
.hovertoChangeDetail ul li a.activeA { opacity: 1; }
.hovertoChangeDetail ul li a .smallDescription { display: none; margin: 16px 0 0 0; }
.accImage { display: none; }
.accImage { width: 100%; height: 280px; border-radius: 16px; overflow: clip; margin: 30px 0 0 0; }
.accImage img { width: 100%; height: 100%; object-fit: cover; }

/* weSeeSetleoSee css */
.weSeeSetleoSee { margin: 200px 0; }
.weSeeSetleoSeeTop { width: 80%; }
.weSeeSetleoSeeListingOuter { margin: 100px 0 0 0; display: flex; }
.listImage { position: relative; width: 370px; height: 370px; margin: 0 auto; border-radius: 50%; overflow: hidden; }
.listImage img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; }
.hoverImage { opacity: 0; visibility: hidden; }
.active .listImage .hoverImage { opacity: 1; visibility: visible; }
.active .listImage .withOutHover { opacity: 0; visibility: hidden; }
.active .hoverIcon { transform: rotate(45deg); }
.weSeeSetleoSeeListingInner { width: 50%; }
.weSeeSetleoSeeList { border: 1px solid #FFFFFF40; padding: 100px 100px 40px 40px; position: relative; background: linear-gradient(360deg, rgba(5, 4, 30, 1) -110%, var(--bgColor) 83.57%, rgba(5, 4, 30, 0) 110%); }
.weSeeSetleoSeeList:hover .listImage img { transform: scale(1.2); }
.weSeeSetleoSeeListingInner:last-child { margin-top: 300px; }
.listImageOuter { position: relative; z-index: 1; }
.listImageOuter:before { content: ''; position: absolute; width: 400px; height: 400px; background-color: var(--bgColor); border-radius: 50%; top: 50%; left: 49%; transform: translate(-50%, -50%); z-index: 0; }
.listContent div { position: absolute; bottom: 40px; transition: all 0.3s; }
.listContent div .titleHeading { text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.listContent div .description { font-size: var(--normalFont); display: block; }
.listContent { height: 150px; }
.hoverContent { opacity: 0; visibility: hidden; }
.listImageOuter:after { content: ''; position: absolute; width: 400px; height: 400px; top: 50%; left: 52%; z-index: -1; transform: translate(-50%, -50%); border-radius: 50%; border: 8px solid var(--primaryColor); }
.hoverIcon { position: absolute; top: 33px; right: 76px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--primaryColor); cursor: pointer; transition: all 0.3s; }
.listContent.active .withOutHoverContent { opacity: 0; visibility: hidden; }
.listContent.active .hoverContent { opacity: 1; visibility: visible; }
.hoverContent .titleHeading { color: var(--primaryColor); }
.weSeeSetleoSeeList:before { content: ''; position: absolute; left: -2px; top: 0; width: 3px; height: 80%; background: linear-gradient(90deg, #B2058C 17%, #C51768 22%, #D72848 28%, #E5362D 34.01%, #F14019 41.01%, #F8480A 48.01%, #FD4C02 57.01%, #FF4E00 72.01%, #F8C031 100.02%); border-radius: 60%; filter: blur(3px); animation: upDown 5s ease-in-out infinite; }
@keyframes upDown {
	0%, 100% { top: 0; height: 80%; }
	50% { top: 50%; height: 50%; }
}
.weSeeSetleoSeeList:after { content: ''; position: absolute; bottom: -2px; left: 0; width: 80%; height: 3px; background: linear-gradient(90deg, #B2058C 17%, #C51768 22%, #D72848 28%, #E5362D 34.01%, #F14019 41.01%, #F8480A 48.01%, #FD4C02 57.01%, #FF4E00 72.01%, #F8C031 100.02%); filter: blur(3px); border-radius: 60%; animation: leftRight 5s ease-in-out infinite }
@keyframes leftRight {
	0%, 100% { left: 0; width: 80%; }
	50% { left: 50%; width: 50%; }
}
@media (max-width:1440px) {
	.insightList { width: 430px; }
}
@media (max-width:1366px) {
	.bannerContent { width: 50% }
	.hoverIcon { right: 30px; }
	.hovertoChangeDetail ul li a { padding: 24px; }
	.weSeeSetleoSeeTop { width: 90%; }
	.imageListing { height: 640px; }
}
@media (max-width:1280px) {
	.imageListing { height: 580px; }
	.textDescInner { width: 90% }
	.introSetleoLabVideo { height: 450px; }
	.halfContentRight br { display: none }
	.hovertoChangeDetail ul li a { padding: 16px; }
	.imageListing { border-radius: 80px; }
	.imageList { border-radius: 70px; }
	.insightList { width: 400px; }
	.satelliteImage { width: 270px }
}
@media (max-width:1024px) {
	.contentWrapper, .dotWrapper { display: none; }
	.timeLineWrapper { padding: 80px 0 120px 0; }
	.timeLineWrapper ul { margin: 0 auto; padding: 0; list-style: none; max-width: 100%; position: relative; }
	.timeLineWrapper ul li { width: 50%; padding-block: 20px; position: relative; box-sizing: border-box; }
	.timeLineWrapper ul li:nth-child(even) { margin-left: auto; padding-left: 20px; }
	.timeLineWrapper ul li:not(:nth-child(even)) { text-align: right; padding-right: 20px; }
	.timeLineWrapper ul li:after { content: ''; position: absolute; width: 12px; height: 12px; background: #222225; border-radius: 50%; top: 58px; right: -7px; transition: all 0.3s; }
	.timeLineWrapper ul li.gone-view:after { content: ''; position: absolute; width: 12px; height: 12px; background: linear-gradient(90deg, #B2058C 0%, #FF4E00 49.5%, #F8C031 100%); border-radius: 50%; top: 58px; right: -7px; }
	.timeLineWrapper ul li:nth-child(even):after { left: -6px; right: auto; }
	.timeLineWrapper ul li:not(:nth-child(even)):before { right: -19px; }
	.timeLineWrapper ul li:nth-child(even):before { left: -19px; }
	.in-view .timeLineBox h4 { color: var(--primaryColor); }
	.timeLineBox { opacity: 0.5; transition: all 0.3s; }
	.timeLineBox .titleHeading { text-transform: uppercase; font-weight: 700; font-size: var(--mediumFont); }
	.timeLineBox p { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--whiteColor); font-size: var(--xxLargeFont); margin: 0; font-weight: 800; line-height: 1; transition: all 0.3s; text-transform: uppercase; }
	.in-view .timeLineBox { opacity: 1; }
	.in-view .timeLineBox p { -webkit-text-stroke: 1px var(--primaryColor); }
	.timeLineWrapper ul li .timeLineBox span { display: block; font-size: 14px; color: var(--whiteColor); font-weight: 300; }
	.default-line { content: ""; position: absolute; left: 50%; width: 2px; background: linear-gradient(180deg, #0A0A0D 0%, #222225 18%, #202025 84%, #0A0A0D 100%); ; height: 100%; }
	.draw-line { width: 2px; height: 0; position: absolute; left: 50%; background: linear-gradient(0deg, #B2058C 0%, #FF4E00 49.5%, #F8C031 100%); }
	.timeline ul li.in-view::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 42px; height: 42px; border-radius: 50%; background-image: url("https://sg0duxoli5-flywheel.netdna-ssl.com/wp-content/themes/inspired_elearning_theme/images/check-dark.svg"); background-color: #2ecc71; background-size: 20px 20px; background-repeat: no-repeat; background-position: center; transition: 0.125s ease-in-out, background-color 0.2s ease-out, color 0.1s ease-out, border 0.1s ease-out; }
	.timeLineIndex { position: absolute; width: 24px; height: 24px; background: linear-gradient(90deg, #B2058C 0%, #FF4E00 49.5%, #F8C031 100%); display: flex; align-items: center; justify-content: center; border-radius: 50%; top: 47px; right: -13px; z-index: 2; overflow: visible; transition: all 0.3s; transform: scale(0); color: var(--whiteColor); font-size: var(--xMediumFont); }
	.timeLineWrapper ul li:nth-child(even) .timeLineIndex { right: auto; left: -11px; }
	.timeLineWrapper ul li.in-view .timeLineIndex { transform: scale(1); }
	.insightListing { padding: 100px 0; }
	.timeLineWrapper { padding: 0; }
	.timeLineWrapper { display: block; }
	.bannerContent { width: 60%; }
	.introSetleoLabVideo { height: 400px; }
	.satelliteImage { width: 250px; }
	.listImage { width: 300px; height: 300px; }
	.listImageOuter:before { width: 370px; height: 350px; }
	.listImageOuter:after { width: 350px; height: 350px; }
	.hoverIcon { right: 10px; top: 12px; }
}
@media (max-width:768px) {
	.introSetleoLabVideo { height: 300px; }
	.halfContentLeft, .halfContentRight, .weSeeSetleoSeeTop { text-align: center; }
	.halfContentLeft .subHeading:before { left: 50%; transform: translateX(-50%); }
	.halfContentLeft .subHeading:after { display: none; }
	.weSeeSetleoSeeListingInner, .headingButtonInner { width: 100%; }
	.weSeeSetleoSeeListingOuter { flex-wrap: wrap; }
	.weSeeSetleoSeeListingInner:last-child { margin: 0; }
	.weSeeSetleoSeeTop { width: 100%; }
	.weSeeSetleoSeeList { padding: 70px 50px; }
	.listContent { text-align: center; display: flex; justify-content: center; }
	.hoverIcon { right: 125px; }
	.bannerContent { width: 80%; display: flex; flex-direction: column; }
	.textDescInner { width: 100%; }
	.introSetleoLabvideoWrap:before { right: 10%; }
	.imageListing { display: none; }
	.hovertoChangeDetail ul { margin: 0; }
	.introSetleoLabTop { width: 90%; margin: 0 auto; }
	.bannerContent .primaryBtn { width: max-content; }
	
		/* .accImage { display: block; } */ }
@media (max-width:480px) {
	.timeLineBox .titleHeading { text-transform: uppercase; font-weight: 700; font-size: var(--smallFont); }
	.timeLineWrapper ul li .timeLineBox span { font-size: 12px; }
	.listImage { width: 270px; height: 270px; }
	.listImageOuter:before { width: 330px; height: 320px; }
	.listImageOuter:after { width: 320px; height: 310px; }
	.hoverIcon { right: -20px; }
	.middelImageWrapper { width: 300px; height: 300px; }
	.bannerContent { width: 100%; text-align: center; padding: 180px 0 0 0; }
	.introSetleoLabVideo { height: 180px; }
	.halfContentLeft .subHeading span { display: block; }
	.halfContentRight .description { line-height: 22px; }
	.halfContent { margin: 300px 0 100px 0; }
	.satelliteImage { width: 200px; top: -120px; right: 30px; }
	.introSetleoLabvideoWrap:after { width: 100%; height: 100px; bottom: -30%; filter: blur(70px); }
	.banner { align-items: flex-start; }
	.bannerVideo video { object-position: -800px; }
	.textDescOnly { padding: 120px 0 64px 0; }
	.introSetleoLabvideoWrap { padding: 16px; margin: 64px 0 0 0; }
	.introSetleoLabvideoWrap:before { width: 10px; height: 10px; right: 9%; }
	.hovertoChangeDetail ul li a { padding: 24px 0; }
	.weSeeSetleoSee { margin: 100px 0 50px 0; }
	.introSetleoLabTop { width: 100%; }
	.bannerContent .primaryBtn{margin: 0 auto;}
}